<template>
	<view class="top-window-header" :style="{backgroundColor:style.bg}">
		<view class="w-full flex items-center justify-center px-5">
			<view class="left">
				<navigator open-type="reLaunch" url="/pages/index/index">
					<view class="flex items-center">
						<image class="logoimage" :src="sysConfig.logo" mode="heightFix"></image>
					</view>
				</navigator>
			</view>
			<view class="flex-1 ml-4">
				<el-menu :default-active="activePath" mode="horizontal" router popper-effect="dark" :background-color="style.bg" text-color="#fff">
					<el-menu-item index="/">{{$t('index.shouye')}}</el-menu-item>
					<el-menu-item index="/pages/bibi/bibi">{{$t('bibi.bibijiaoyi')}}</el-menu-item>
					<el-menu-item index="/pages/heyue/heyue">{{$t('heyue.yongxuheyue')}}</el-menu-item>
					<el-menu-item index="/pages/institute/institute">{{$t('institute.xueyuan')}}</el-menu-item>
					<el-menu-item index="/pages/lianxiwomeng/lianxiwomeng">{{$t('institute.lianxiwomeng')}}</el-menu-item>
				</el-menu>
			</view>
			<view class="flex">
				<template v-if="userInfo">
					<el-dropdown @command="commandFn">
						<el-button type="primary">
							{{userInfo.username}}<el-icon class="el-icon--right" ><arrow-down /></el-icon>
						</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="a">修改密码</el-dropdown-item>
								<el-dropdown-item command="b">登出</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
				<template v-else>
					<view class="relative" style="width: 260rpx;">
						<view class="text-white absolute left-0 cursor-pointer flex items-center" style="z-index: 1000;" @click="$refs.dropdown.handleOpen()">
							<image src="/static/images/home/lan.png" style="width: 26px;height: 26px;margin-right: 5px;"></image>
							{{languageList[0].find(item=>item.id==appLanguage).name}}<el-icon class="el-icon--right" ><arrow-down /></el-icon>
						</view>
						<el-dropdown @command="commandFn" ref="dropdown" placement="bottom-end">
							<view style="opacity: 0;z-index: -1;height: 30px;width:250rpx ;">{{languageList[0].find(item=>item.id==appLanguage).name}}<el-icon class="el-icon--right" ><arrow-down /></el-icon></view>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item :command="item.id" v-for="(item,index) in languageList[0]">{{item.name}}</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</view>
					<view class="cursor-pointer ml-4">
						 <el-popover placement="bottom" :width="200" trigger="click" popper-class="lz-popover-white">
							<template #reference>
								<image src="/static/images/home/xiazai.png"  style="width: 26px;height: 26px;"></image>
						    </template>
							<view class="bg-white text-center text-black">
								<view class="mb-1">{{$t('index.smxzai')}}</view>
								<image src="/static/images/home/erweima1.png" style="width: 150px;height: 150px;"></image>
							</view>
						</el-popover>
						
					</view>
					<view class="text-white ml-8 cursor-pointer" @click="navigator('/pages/login/login')">{{$t('register.dengru')}}</view>
					<view class="text-white ml-8 border rounded-full text-center cursor-pointer" style="border-color: #fff;width: 140rpx;"
					@click="navigator('/pages/register/register')">{{$t('register.home')}}</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import { ArrowDown } from '@element-plus/icons-vue'
	export default {
		data() {
			return {
				activePath: '',
			}
		},
		components:{
			ArrowDown
		},
		computed: {
			...mapState({
				appMeunShow: state => state.app.appMeunShow,
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
				style: state => state.style.config,
				userInfo: state => state.user.userInfo,
				languageList: state => state.user.languageList,
				appLanguage: state => state.user.appLanguage,
			})
		},
		watch: {
			$route: {
				immediate: true,
				handler(newRoute) {
					const width = uni.getSystemInfoSync().screenWidth
					if (width >= 768) {
						let path = newRoute.path
						this.activePath = path
					}
				}
			}
		},
		mounted() {
		},
		methods: {
			...mapActions(['changeLang']),
			navigator(path) {
				uni.navigateTo({
					url: path,
				});
			},
			commandFn(id){
				this.$i18n.locale = id
				this.changeLang(id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-window-header {
		height: 58px;
		box-sizing: border-box;
		box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.2);
		display: flex;
		align-items: center;
		.left {
			.logoimage {
				width: 60px;
				height: 45px;
				margin-right: 10px;
			}
			.text-base {
				font-size: 20px;
			}
		}

	}
</style>